{% extends 'core/base.html' %}
{% load staticfiles %}

{% block breadcrumb %}
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item">Users</li>
        <li class="breadcrumb-item active">Friends</li>
{% endblock breadcrumb%}

{% block content %}

<div class="container-fluid">
    <div id="ui-view" style="opacity: 1;">
        <div class="animated fadeIn">
            <div class="row">
                <div class="col-12 mb-3">
                    <div class="social-box" style="height:110%">
                        <img src="{{ user_view.img.url }}" class="img-avatar m-4" alt="{{ user_view }}" width="20%">
                        <ul>
                        <li>
                            <strong>{{ user_view.friends.all.count }}</strong>
                            <span>friends</span>
                        </li>
                        <li>
                            <strong>{{ user_view.project.all.count }}</strong>
                            <span>projects</span>
                        </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card mt-5">
                        <div class="simple-box">
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <ul class="mt-4 mx-5">
                                        <h5>Personal info:</h5>
                                        <li><span>Name:</span> {{ user_view.user.get_full_name }}</li>
                                        <li><span>Company:</span> {{ user_view.company }}</li>
                                        <li><span>E-mail:</span> {{ user_view.user.email}}</li>
                                        <li><span>Last login:</span> {{ user_view.user.last_login }}</li>
                                        <li><span>Date joined:</span> {{ user_view.user.date_joined }}</li>
                                    </ul>
                                </div>
                                <div class="col-12 col-md-6 text-left">
                                    <ul class="m-4">
                                        <h5>Tasks that {{ user_view.user.first_name }} is involved:</h5>
                                        {% for task in user_view.user.task_set.all %}
                                        <li>{{ task }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="card-body">
                                    <div class="tab-pane p-3 active show">
                                      <div class="message">
                                        <div class="py-3 pb-5 mr-3 float-left">
                                          <div class="avatar">
                                            <img src="{{ user_view.img.url }}" class="img-avatar" alt="{{ friend.user.get_full_name }}">
                                            <span class="avatar-status badge-success"></span>
                                          </div>
                                        </div>
                                        <div>
                                          <small class="text-muted">{{ user_view.user.get_full_name }}</small>
                                            {% if user_view.user.last_login %}
                                          <small class="text-muted float-right mt-1">Last login: {{ user_view.user.last_login|date:"H:i" }} in {{ user_view.user.last_login|date:"d/m" }}</small>
                                            {% endif %}
                                        </div>
                                        <div class="text-truncate font-weight-bold">{{ user_view.company }}</div>
                                        {% if user_view.user.project_set %}
                                        <em class="text-muted">Projects that {{ user_view.user.first_name }} is working:</em>
                                        <small class="text-muted">
                                            {% for project in user_view.user.project_set.all %}
                                            {{ project }},
                                            {% endfor %}
                                        </small>
                                        {% else %}
                                        <em class="text-muted">{{ user_view.user.first_name }} is working in no projects until now.</em>
                                        {% endif %}
                                      </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="card-body">
                                    <div class="tab-pane p-3 active show">
                                        {% if user_view.friends.all %}
                                        <h5 class="">{{ user_view.user.first_name }}'s Friends:</h5>
                                        <div class="row">
                                        {% for friend in user_view.friends.all %}
                                        <div class="py-3 pb-5 mr-3 float-left ml-3" style="width: 20%">
                                            <p class="avatar">
                                                <img src="{{ friend.img.url }}" class="img-avatar" alt="{{ friend.user.get_full_name }}">
                                                <span class="avatar-status badge-success"></span>
                                            </p>
                                            <p>
                                                <a href="{% url 'register:user' profile_id=friend.id%}" class="text-info">{{ friend.user.first_name }}</a>
                                            </p>
                                        </div>
                                        {% endfor%}
                                        {% else %}
                                        <em class="text-muted">{{ user_view.user.first_name }} have no friends.</em>
                                        {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



{% endblock %}